<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <form action="">
        
        爱好：音乐<input type="checkbox" name="del">
        篮球<input type="checkbox" name="del">
        足球<input type="checkbox" name="del">
        动漫<input type="checkbox" name="del">
        游戏<input type="checkbox" name="del">
        <br>
        <input type="button" class="btn btn-success" id="sltAll" value="全选">
        <input type="button" class="btn btn-success" id="sltRv" value="反选">
        <input type="button" class="btn btn-success" id="sltDel" value="取消">
    </form>
    <script>
        function clear(element){
           for(var i=0;i<element.childNodes.length;i++){
               var node = element.childNodes[i];
               if(node.nodeType==3&&!/\S/.test(node.nodeValue)){
                   node.parentNode.removeChild(node);
               }
           }
       }
       var html = document.childNodes[1];
       console.log(html.childNodes);
       clear(html);
       console.log(html.childNodes);
        // 节点操作
       var body = html.childNodes[1];
       console.log(body.childNodes);
       var script = body.childNodes[3];
       //创建table
       var table =document.createElement('table');
       table.setAttribute('border', 1);
       for(var row=1;row<10;row++){
           var tr = document.createElement('tr');
           for(var col=1;col<10;col++){
               var td = document.createElement('td');
               var tdv = document.createTextNode(row+'x'+col+'='+row*col);
               td.appendChild(tdv);
               tr.appendChild(td);
               
           }
           table.appendChild(tr);
       }
        // body.appendChild(table);//等价于
        body.insertBefore(table,script);

        var sltAll = document.querySelector('#sltAll')
        var sltDel = document.querySelector('#sltDel')
        var sltRv = document.querySelector('#sltRv')
        
        // 全选
        sltAll.addEventListener('click', function(){
            var del = document.querySelectorAll('input[name="del"]');
            del.forEach(function(v,k){
                // console.log(v)
                // console.log(k)
                v.checked = true;
                // console.log(v.checked )
            })
        })

        // 取消 全选和取消可以合并成一个按钮，感兴趣的同学回去可以尝试去做出来。
        sltDel.addEventListener('click', function(){
            var del = document.querySelectorAll('input[name="del"]');
            del.forEach(function(v,k){
                v.checked = false;
            })
        })
        
        // 反选
        sltRv.addEventListener('click', function(){
            var del = document.querySelectorAll('input[name="del"]');
            del.forEach(function(v,k){ 
                v.checked = !v.checked; // 取反
            })
        })
    </script>
</body>
</html>